import RequestTable from '@/components/RequestTable';
import { Button, Form, Input, TableProps } from 'antd';
import React from 'react';
// import { createStyles } from 'antd-style';

// const useStyle = createStyles(({ css, token }) => {
//   const { antCls } = token;
//   return {
//     customTable: css`
//       ${antCls}-table {
//         ${antCls}-table-container {
//           ${antCls}-table-body,
//           ${antCls}-table-content {
//             scrollbar-width: thin;
//             scrollbar-color: #eaeaea transparent;
//             scrollbar-gutter: stable;
//           }
//         }
//       }
//     `,
//   };
// });

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  street: string;
  building: string;
  number: number;
  companyAddress: string;
  companyName: string;
  gender: string;
}

const columns: TableProps['columns'] = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: 100,
    fixed: 'left',
  },
  {
    title: 'Other',
    children: [
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        width: 150,
      },
      {
        title: 'Address',
        children: [
          {
            title: 'Street',
            dataIndex: 'street',
            key: 'street',
            width: 150,
          },
          {
            title: 'Block',
            children: [
              {
                title: 'Building',
                dataIndex: 'building',
                key: 'building',
                width: 100,
              },
              {
                title: 'Door No.',
                dataIndex: 'number',
                key: 'number',
                width: 100,
              },
            ],
          },
        ],
      },
    ],
  },
  {
    title: 'Company',
    children: [
      {
        title: 'Company Address',
        dataIndex: 'companyAddress',
        key: 'companyAddress',
        width: 200,
      },
      {
        title: 'Company Name',
        dataIndex: 'companyName',
        key: 'companyName',
      },
    ],
  },
  {
    title: 'Gender',
    dataIndex: 'gender',
    key: 'gender',
    width: 80,
    fixed: 'right',
  },
];

const Index: React.FC = () => {
  const [form] = Form.useForm();
  const tableRef = React.useRef<any>();
  const getTableData = (params: any, formData: any) => {
    // console.log(params, formData, '参数,搜索表单参数');
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          data: {
            records: Array.from({ length: 101 }).map((_, i) => ({
              key: i,
              name: `John Brown${i}`,
              age: i + 1,
              street: `Lake Park${i}`,
              building: `C${i}`,
              number: 2035,
              companyAddress: `Lake Street 42${i}`,
              companyName: `SoftLake Co${i}`,
              gender: 'M',
            })),
          },
        });
      }, 600);
    });
  };
  return (
    <>
      <Form
        form={form}
        layout="inline"
        onFinish={() => {
          tableRef?.current?.submit();
        }}
        style={{ marginBottom: 16 }}
      >
        <Form.Item label="名字" name="name">
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item label="年龄" name="age">
          <Input placeholder="请输入" />
        </Form.Item>
        <Button type="primary" htmlType="submit">
          搜索
        </Button>
      </Form>
      <RequestTable
        //   className={styles.customTable}

        columns={columns}
        form={form}
        ref={tableRef}
        
        getTableData={getTableData}
        hookRest={{
          formatResult: (res: any) => {
            return {
              data: {
                records: res.data.records,
                total: res.data.records.length,
              },
            };
          },
          
        }}
        tableRest={{
          scroll: {
            x: 500,
            y: 600,
          },
          bordered: true,
        }}
      />
    </>
  );
};

export default Index;
